<template>
  <div class="number">
    <button @click="onClick(-1)">-</button>
    <input type="number" style="width:60px" v-model="count" @change="onCountChanged"/>
    <button @click="onClick(1)">+</button>
  </div>
</template>

<script>

export default {
  data () {
    return {
      count: 0,
      minValue:0,
    }
  },
  mounted () {    
    this.count = this.initcount;
    this.minValue = this.min || 0 ;
  },
  methods: {
    onCountChanged () {
      let count = this.count;
      this.$emit('onCountChanged', { id: this.id, count: count })
    },
    onClick(i){
      if(i===1){
        this.count++
      }else{
        this.count--;
      }
      if(this.count < this.minValue) this.count=this.minValue;
      if(this.count > this.max) this.count=this.max;

      this.onCountChanged ();

    }
  },
  props: ['initcount', 'max', 'id', 'min'],
  
}
</script>

<style scoped>
.number{
  display: flex;
  flex-direction: row;
  justify-content:left;
}
</style>
